<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>博客详情</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script
	src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script
	src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet"
	href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
<link rel="stylesheet" href="/css/common.css">
</head>
<body>
	<div id="app" class="container">
		<br />
		<h4 class="center">博客详情</h4>
		<hr />
		<div class="card center" style="margin-top: 1em;">
			<div class="card-header">
				<h5 class="text-info" v-text="title"></h5>
			</div>
			<div class="card-body" v-html="detail"></div>
			<div class="card-footer" align="right">
				<span class="blank">{{createTime | formatDate}}</span> <span
					class="fi-eye large blank"></span>10<span
					class="fi-heart large blank"></span>5<span class="blank pointer">赞</span>
			</div>
		</div>
		<hr />
		<div class="form-group">
			<label for="email">发表评论</label>
			<textarea v-model="comment.content" class="form-control" rows="2"
				placeholder="评论内容"></textarea>
			<button @click="addComment" class="blank-top-bottom">发表</button>
		</div>
		<div v-for="(item,index) in comments">

			<p>
				<span class="text-success" v-text="'# '+(index+1)+'楼 '"></span> <span
					class="text-muted">{{item.createTime | formatDate}}</span>
			</p>
			<p v-text="item.content"></p>
			<hr />
		</div>
	</div>
</body>



<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.1/axios.min.js"></script>
<script src="/js/vue-filter.js"></script>
<script>
		new Vue({
			el: "#app",
			data: function() {
				return {
					title: '',
					articleId : null,
					detail: '',
					createTime: '',
					comment: {
						articleId : '',
						content : '',
					},
					comments: []
				}
			},
			mounted(){
				this.title = sessionStorage.getItem("title")
				this.articleId = sessionStorage.getItem("articleId")
				this.comment.articleId = this.articleId
				this.getArticle()
				this.initComment()
			},
			methods: {
				getArticle() {
					axios.get("/api/content/"+this.articleId).then(reponse => {
						this.detail = reponse.data.content
						this.createTime = reponse.data.createTime
					}).catch(error => {
						alert("获取数据失败" + error)
					})
				},
				initComment(){
					axios.get("/api/comment/"+this.articleId).then(response => {
						this.comments = response.data
					}).catch(error => {
						alert("获取评论失败" + error)
					})
				},
				addComment(){
					if(this.comment.content.length<6){
						alert('评论字数不得小于6')
						return
					}
					axios.post("/api/comment",this.comment).then(response => {
						this.comments.push(response.data)
					}).catch(error => {
						alert("发表评论失败" + error)
					})
				}
			}
		})
	</script>

</html>
